<template>
  <div class="environment-evaluation" :key="$route.fullPath">
    <!-- 顶部标题 -->
    <header class="page-header">
      <h1>灵璧县人工智能产业园环境预警评价</h1>
      <div class="current-time">{{ currentTime }}</div>
    </header>

    <div class="page-content">
      <div class="evaluation-summary">
        <div class="score-display">
          <div class="score-circle" :class="getScoreClass(totalScore)">
            {{ totalScore }}
          </div>
          <div class="score-label">综合评分</div>
        </div>
        
        <div class="evaluation-result">
          <div class="result-title">评价结果</div>
          <div class="result-value" :class="getScoreClass(totalScore)">{{ getEvaluationResult(totalScore) }}</div>
          <div class="result-desc">{{ getEvaluationDesc(totalScore) }}</div>
        </div>
      </div>
      
      <!-- 重新设计选项卡 -->
      <div class="tab-container">
        <button 
          class="tab-button" 
          :class="{ active: currentEvalTab === 'indicators' }"
          @click="currentEvalTab = 'indicators'"
        >
          指标体系
        </button>
        <button 
          class="tab-button" 
          :class="{ active: currentEvalTab === 'warnings' }"
          @click="currentEvalTab = 'warnings'"
        >
          预警情况
        </button>
        <button 
          class="tab-button" 
          :class="{ active: currentEvalTab === 'enforcement' }"
          @click="currentEvalTab = 'enforcement'"
        >
          执法情况
        </button>
        <button 
          class="tab-button" 
          :class="{ active: currentEvalTab === 'suggestions' }"
          @click="currentEvalTab = 'suggestions'"
        >
          建议措施
        </button>
      </div>
      
      <div class="evaluation-details">
        <!-- 指标体系 -->
        <div v-if="currentEvalTab === 'indicators'" class="indicators-table">
          <table>
            <thead>
              <tr>
                <th>评价指标</th>
                <th>权重</th>
                <th>得分</th>
                <th>状态</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(indicator, index) in evaluationIndicators" :key="index">
                <td>{{ indicator.name }}</td>
                <td>{{ indicator.weight }}</td>
                <td>{{ indicator.score }}</td>
                <td>
                  <span class="status-badge" :class="getIndicatorClass(indicator.score)">
                    {{ getIndicatorStatus(indicator.score) }}
                  </span>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
        
        <!-- 预警情况 -->
        <div v-if="currentEvalTab === 'warnings'" class="warnings-chart">
          <div ref="warningsChartRef" class="chart-container"></div>
        </div>
        
        <!-- 执法情况 -->
        <div v-if="currentEvalTab === 'enforcement'" class="enforcement-list">
          <div v-for="(item, index) in enforcementData" :key="index" class="enforcement-item">
            <div class="enforcement-time">{{ item.time }}</div>
            <div class="enforcement-content">
              <div class="enforcement-title">{{ item.title }}</div>
              <div class="enforcement-desc">{{ item.description }}</div>
              <div class="enforcement-result" :class="item.status">
                <span class="result-label">处理结果:</span>
                <span class="result-value">{{ item.result }}</span>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 建议措施 -->
        <div v-if="currentEvalTab === 'suggestions'" class="suggestions-list">
          <div v-for="(item, index) in suggestionData" :key="index" class="suggestion-item">
            <div class="suggestion-icon" :class="item.priority"></div>
            <div class="suggestion-content">
              <div class="suggestion-title">{{ item.title }}</div>
              <div class="suggestion-desc">{{ item.description }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, onUnmounted, watch } from 'vue'
import * as echarts from 'echarts'
import dayjs from 'dayjs'

// 状态初始化
const currentTime = ref(dayjs().format('YYYY-MM-DD HH:mm:ss'))
let timer: number = 0

// 图表引用
const warningsChartRef = ref<HTMLElement | null>(null)

// 评价选项卡
const currentEvalTab = ref('indicators')
const evaluationTabs = ref([
  { id: 'indicators', name: '指标体系' },
  { id: 'warnings', name: '预警情况' },
  { id: 'enforcement', name: '执法情况' },
  { id: 'suggestions', name: '建议措施' }
])

// 评价指标数据
const evaluationIndicators = ref([
  { name: '空气质量指数', weight: '25%', score: 85 },
  { name: '水质指数', weight: '25%', score: 78 },
  { name: '噪声指数', weight: '10%', score: 92 },
  { name: '固废处理', weight: '15%', score: 88 },
  { name: '环保设施运行', weight: '15%', score: 95 },
  { name: '预警响应时间', weight: '10%', score: 82 }
])

// 计算总分
const totalScore = computed(() => {
  const weights = evaluationIndicators.value.map(item => parseInt(item.weight) / 100)
  const scores = evaluationIndicators.value.map(item => item.score)
  
  let totalScore = 0
  for (let i = 0; i < weights.length; i++) {
    totalScore += weights[i] * scores[i]
  }
  
  return Math.round(totalScore)
})

// 执法情况数据
const enforcementData = ref([
  {
    time: '2023-06-15',
    title: '灵璧县化工厂超标排放处理',
    description: '接到举报后，环保执法人员对灵璧县化工厂进行突击检查，发现废水排放超标。',
    status: 'resolved',
    result: '已责令整改并处罚5万元'
  },
  {
    time: '2023-05-28',
    title: '园区东侧噪声污染处理',
    description: '园区东侧某企业夜间生产噪声超标，影响周边居民休息。',
    status: 'pending',
    result: '整改中'
  },
  {
    time: '2023-05-10',
    title: '灵璧县塑料制品厂VOCs排放处理',
    description: '例行检查发现灵璧县塑料制品厂VOCs处理设施运行不正常，导致废气直排。',
    status: 'resolved',
    result: '已完成整改并验收'
  },
  {
    time: '2023-04-22',
    title: '园区南侧水污染事件处理',
    description: '园区南侧某企业偷排工业废水，造成附近水体污染。',
    status: 'resolved',
    result: '已处罚10万元并责令停产整顿'
  }
])

// 建议措施数据
const suggestionData = ref([
  {
    title: '加强VOCs在线监测系统建设',
    description: '建议在园区重点VOCs排放企业安装在线监测系统，实现24小时实时监控，及时发现异常排放情况。',
    priority: 'high'
  },
  {
    title: '优化园区水污染防治设施',
    description: '对园区污水处理厂进行技术升级，提高处理能力和效率，确保出水稳定达标。',
    priority: 'medium'
  },
  {
    title: '完善环境应急响应机制',
    description: '建立健全环境应急响应机制，定期开展应急演练，提高突发环境事件处置能力。',
    priority: 'medium'
  },
  {
    title: '加强环保宣传教育',
    description: '对园区企业开展环保法律法规和技术培训，提高企业环保意识和自主管理能力。',
    priority: 'low'
  }
])

// 环境预警评价相关方法
const getScoreClass = (score: number) => {
  if (score >= 90) return 'excellent'
  if (score >= 80) return 'good'
  if (score >= 70) return 'average'
  if (score >= 60) return 'poor'
  return 'bad'
}

const getEvaluationResult = (score: number) => {
  if (score >= 90) return '优秀'
  if (score >= 80) return '良好'
  if (score >= 70) return '一般'
  if (score >= 60) return '较差'
  return '差'
}

const getEvaluationDesc = (score: number) => {
  if (score >= 90) return '园区环境状况优秀，各项指标表现良好，环保设施运行正常。'
  if (score >= 80) return '园区环境状况良好，大部分指标表现良好，个别指标有待提升。'
  if (score >= 70) return '园区环境状况一般，部分指标表现不佳，需要加强管理。'
  if (score >= 60) return '园区环境状况较差，多项指标表现不佳，需要重点整治。'
  return '园区环境状况差，大部分指标表现不佳，需要全面整治。'
}

const getIndicatorClass = (score: number) => {
  if (score >= 90) return 'excellent'
  if (score >= 80) return 'good'
  if (score >= 70) return 'average'
  if (score >= 60) return 'poor'
  return 'bad'
}

const getIndicatorStatus = (score: number) => {
  if (score >= 90) return '优秀'
  if (score >= 80) return '良好'
  if (score >= 70) return '一般'
  if (score >= 60) return '较差'
  return '差'
}

// 初始化预警情况图表
const initWarningsChart = () => {
  if (!warningsChartRef.value) return
  
  const existingChart = (warningsChartRef.value as any)._echarts_instance_
  if (existingChart) {
    existingChart.dispose()
  }
  
  const warningsChart = echarts.init(warningsChartRef.value)
  
  const option = {
    title: {
      text: '近6个月环境预警统计',
      textStyle: {
        color: '#fff',
        fontSize: 16
      },
      left: 'center'
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    legend: {
      data: ['轻微预警', '一般预警', '严重预警'],
      textStyle: { color: '#fff' },
      bottom: 0
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '15%',
      top: '15%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        data: ['1月', '2月', '3月', '4月', '5月', '6月'],
        axisLine: {
          lineStyle: {
            color: '#0ff'
          }
        },
        axisLabel: {
          color: '#fff'
        }
      }
    ],
    yAxis: [
      {
        type: 'value',
        name: '预警次数',
        nameTextStyle: {
          color: '#fff'
        },
        axisLabel: {
          formatter: '{value}',
          color: '#fff'
        },
        axisLine: {
          lineStyle: {
            color: '#0ff'
          }
        },
        splitLine: {
          lineStyle: {
            color: 'rgba(0,255,255,0.1)'
          }
        }
      }
    ],
    series: [
      {
        name: '轻微预警',
        type: 'bar',
        stack: '预警',
        emphasis: {
          focus: 'series'
        },
        data: [12, 15, 9, 14, 10, 8],
        itemStyle: {
          color: '#0ff'
        }
      },
      {
        name: '一般预警',
        type: 'bar',
        stack: '预警',
        emphasis: {
          focus: 'series'
        },
        data: [8, 10, 6, 9, 7, 5],
        itemStyle: {
          color: '#ff0'
        }
      },
      {
        name: '严重预警',
        type: 'bar',
        stack: '预警',
        emphasis: {
          focus: 'series'
        },
        data: [3, 5, 2, 4, 2, 1],
        itemStyle: {
          color: '#f00'
        }
      }
    ]
  }
  
  warningsChart.setOption(option)
  
  // 监听窗口大小变化，调整图表大小
  window.addEventListener('resize', () => {
    warningsChart.resize()
  })
}

// 组件挂载
onMounted(() => {
  // 初始化预警情况图表
  setTimeout(() => {
    initWarningsChart()
  }, 300)
  
  // 启动定时器
  timer = setInterval(() => {
    currentTime.value = dayjs().format('YYYY-MM-DD HH:mm:ss')
  }, 1000)
})

// 组件卸载
onUnmounted(() => {
  clearInterval(timer)
  
  // 销毁图表实例
  if (warningsChartRef.value) {
    const chart = (warningsChartRef.value as any)._echarts_instance_
    if (chart) {
      chart.dispose()
    }
  }
})

// 监听选项卡变化
watch(currentEvalTab, (newVal) => {
  if (newVal === 'warnings') {
    setTimeout(() => {
      initWarningsChart()
    }, 100)
  }
})
</script>

<style lang="scss" scoped>
.environment-evaluation {
  height: 100%;
  background: linear-gradient(135deg, #0a2744 0%, #001529 100%);
  color: #fff;
  display: flex;
  flex-direction: column;
  
  // 页面头部
  .page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    background: rgba(0,0,0,0.5);
    border-bottom: 1px solid rgba(0,255,255,0.3);
    
    h1 {
      font-size: 20px;
      margin: 0;
      color: #0ff;
    }
    
    .current-time {
      font-size: 14px;
      color: rgba(255,255,255,0.7);
    }
  }
  
  // 页面内容
  .page-content {
    flex: 1;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    overflow-y: auto;
    
    // 评价摘要
    .evaluation-summary {
      display: flex;
      gap: 20px;
      align-items: center;
      
      .score-display {
        display: flex;
        flex-direction: column;
        align-items: center;
        
        .score-circle {
          width: 100px;
          height: 100px;
          border-radius: 50%;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 36px;
          font-weight: bold;
          border: 2px solid;
          
          &.excellent {
            color: #0f0;
            border-color: #0f0;
            box-shadow: 0 0 10px rgba(0,255,0,0.5);
          }
          
          &.good {
            color: #0ff;
            border-color: #0ff;
            box-shadow: 0 0 10px rgba(0,255,255,0.5);
          }
          
          &.average {
            color: #ff0;
            border-color: #ff0;
            box-shadow: 0 0 10px rgba(255,255,0,0.5);
          }
          
          &.poor {
            color: #ffa500;
            border-color: #ffa500;
            box-shadow: 0 0 10px rgba(255,165,0,0.5);
          }
          
          &.bad {
            color: #f00;
            border-color: #f00;
            box-shadow: 0 0 10px rgba(255,0,0,0.5);
          }
        }
        
        .score-label {
          margin-top: 10px;
          font-size: 14px;
          color: rgba(255,255,255,0.7);
        }
      }
      
      .evaluation-result {
        flex: 1;
        
        .result-title {
          font-size: 16px;
          color: rgba(255,255,255,0.7);
          margin-bottom: 5px;
        }
        
        .result-value {
          font-size: 24px;
          font-weight: bold;
          margin-bottom: 10px;
          
          &.excellent { color: #0f0; }
          &.good { color: #0ff; }
          &.average { color: #ff0; }
          &.poor { color: #ffa500; }
          &.bad { color: #f00; }
        }
        
        .result-desc {
          font-size: 14px;
          color: rgba(255,255,255,0.7);
          line-height: 1.5;
        }
      }
    }
    
    // 新的选项卡样式
    .tab-container {
      display: flex;
      justify-content: space-between;
      margin: 20px 0;
      background: #001529;
      border-bottom: 2px solid rgba(0,255,255,0.3);
      
      .tab-button {
        flex: 1;
        background: transparent;
        border: none;
        color: #fff;
        padding: 15px 0;
        font-size: 16px;
        cursor: pointer;
        transition: all 0.3s;
        position: relative;
        
        &:hover {
          color: #0ff;
        }
        
        &.active {
          color: #0ff;
          font-weight: bold;
          
          &:after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            width: 100%;
            height: 2px;
            background: #0ff;
            box-shadow: 0 0 10px rgba(0,255,255,0.5);
          }
        }
      }
    }
    
    // 评价详情
    .evaluation-details {
      background: rgba(0,0,0,0.2);
      border-radius: 8px;
      padding: 20px;
      flex: 1;
      
      // 指标体系表格
      .indicators-table {
        width: 100%;
        overflow-x: auto;
        
        table {
          width: 100%;
          border-collapse: collapse;
          
          th, td {
            padding: 10px;
            text-align: left;
            border-bottom: 1px solid rgba(255,255,255,0.1);
          }
          
          th {
            color: #0ff;
            font-weight: normal;
          }
          
          .status-badge {
            padding: 2px 8px;
            border-radius: 10px;
            font-size: 12px;
            
            &.excellent {
              background: rgba(0,255,0,0.1);
              color: #0f0;
            }
            
            &.good {
              background: rgba(0,255,255,0.1);
              color: #0ff;
            }
            
            &.average {
              background: rgba(255,255,0,0.1);
              color: #ff0;
            }
            
            &.poor {
              background: rgba(255,165,0,0.1);
              color: #ffa500;
            }
            
            &.bad {
              background: rgba(255,0,0,0.1);
              color: #f00;
            }
          }
        }
      }
      
      // 预警情况图表
      .warnings-chart {
        .chart-container {
          height: 300px;
          background: rgba(255,255,255,0.02);
          border-radius: 4px;
        }
      }
      
      // 执法情况列表
      .enforcement-list {
        display: flex;
        flex-direction: column;
        gap: 15px;
        
        .enforcement-item {
          display: flex;
          gap: 15px;
          background: rgba(255,255,255,0.02);
          border-radius: 4px;
          padding: 15px;
          
          .enforcement-time {
            min-width: 100px;
            color: #0ff;
            font-size: 14px;
          }
          
          .enforcement-content {
            flex: 1;
            
            .enforcement-title {
              font-size: 16px;
              font-weight: bold;
              color: #fff;
              margin-bottom: 5px;
            }
            
            .enforcement-desc {
              font-size: 14px;
              color: rgba(255,255,255,0.7);
              margin-bottom: 10px;
            }
            
            .enforcement-result {
              font-size: 14px;
              
              .result-label {
                color: rgba(255,255,255,0.7);
                margin-right: 5px;
              }
              
              &.resolved .result-value {
                color: #0f0;
              }
              
              &.pending .result-value {
                color: #ff0;
              }
              
              &.failed .result-value {
                color: #f00;
              }
            }
          }
        }
      }
      
      // 建议措施列表
      .suggestions-list {
        display: flex;
        flex-direction: column;
        gap: 15px;
        
        .suggestion-item {
          display: flex;
          gap: 15px;
          background: rgba(255,255,255,0.02);
          border-radius: 4px;
          padding: 15px;
          
          .suggestion-icon {
            width: 16px;
            height: 16px;
            border-radius: 50%;
            margin-top: 3px;
            
            &.high {
              background: #f00;
              box-shadow: 0 0 5px rgba(255,0,0,0.5);
            }
            
            &.medium {
              background: #ff0;
              box-shadow: 0 0 5px rgba(255,255,0,0.5);
            }
            
            &.low {
              background: #0ff;
              box-shadow: 0 0 5px rgba(0,255,255,0.5);
            }
          }
          
          .suggestion-content {
            flex: 1;
            
            .suggestion-title {
              font-size: 16px;
              font-weight: bold;
              color: #fff;
              margin-bottom: 5px;
            }
            
            .suggestion-desc {
              font-size: 14px;
              color: rgba(255,255,255,0.7);
            }
          }
        }
      }
    }
  }
}
</style> 